<template>
  <view class="upload-box">
    <view class="previewBox">
      <view @click="uploadClick" class="previewBoxItem" v-show="imgList.length < limit">
        <view class="size">
          <text class="iconfont icon-location"></text>
          <view class="up">上传视频/图片 <br> 最多9张</view>
        </view>
      </view>
      <view class="previewBoxItem" v-for="(item, index) in imgList" :key="index">
        <image class="imgBox" :src="item" @click="previewClick(index)"></image>
        <view @click="deleteClick" :data-index="index" class="deleteBox  icon-shanchu">
          <u-icon name="trash" color="#FFFFFF" size="18"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { BaseUrl } from '@/common/config.js'
import { mapGetters } from 'vuex'
export default {
  props: {
    limit: {
      type: Number,
      default: 9,
    },
    imgList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      previewUrl: [],
    }
  },
  computed: {
    ...mapGetters(['token']),
  },
  mounted () {
    console.log(this.previewUrl, 'previewUrl')
  },
  watch: {
    imgList (n) {
      console.log(n, 'imglist变了====')
    }
  },
  methods: {
    // 调用系统相机
    getUploadFile () {
      //在此上传图片到服务器(多文件上传)
      const _this = this
      console.log(_this.previewUrl, 'previewUrl=======')
      if (_this.previewUrl.length > 0) {
        uni.uploadFile({
          url: BaseUrl + '/oss/uploadPic',
          header: {
            Authorization: _this.token,
          },
          files: _this.previewUrl,
          success: res => {
            if (res.statusCode == '200' && res.data) {
              console.log(res, 'uploadFile---------------')
              //upload方法返回回来的数据是string类型，所以这里要转成json对象
              let result = JSON.parse(res.data)
              let list = result.data.split(',')
              // list = list.map(item => {return 'https://res.jiyaqi.com/' + item})
              _this.$emit('success', list)
            }
          },
          fail: () => {
            uni.showToast({
              title: '图片上传失败',
              icon: 'error',
            })
          },
        })
      } else {
        _this.$emit('success', [])
      }
    },
    // 		systemCameraClick: function() {
    // 			let that = this;

    // 			if (that.previewUrl.length < 6) {
    // 				uni.chooseImage({
    // 					count: 3,
    // 					sizeType: ['original', 'compressed'],
    // 					success: function(res) {
    // 						const files = res.tempFiles;
    // 						for (let i = 0; i < files.length; i++) {
    // 							let obj = new Object();
    // 							obj.name = 'img' + i;
    // 							obj.uri = files[i].path;
    // 							obj.key = 'upfile'
    // 							that.previewUrl.push(obj);
    // 						}
    // 					}
    // 				});
    // 			}
    // 		},
    previewClick: function (index) {
      let that = this
      let arr = []
      for (let item of that.imgList) {
        arr.push(item)
      }
      uni.previewImage({
        urls: arr,
        current: index
      })
    },
    deleteClick: function (e) {
      let index = e.mp.currentTarget.dataset.index
      this.previewUrl.splice(index, 1)
      this.$emit('delimg', index)
    },
    uploadClick: function () {
      let that = this
      let limitNum = this.limit - this.imgList.length
      uni.chooseImage({
        count: limitNum,
        success: async res => {
          const files = res.tempFiles
          for (let i = 0; i < files.length; i++) {
            let obj = new Object()
            obj.name = `files${i}`
            obj.uri = files[i].path
            obj.file = files[i]
            that.previewUrl.push(obj)
          }
          await that.getUploadFile()
          that.previewUrl = []
        },
      })
    },
    reset () {
      this.previewUrl = []
    },
  },
}
</script>

<style lang="scss">
/* 上传图片 */
.size {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.previewBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -0.6%;
}

.imgBox {
  position: relative;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.previewBoxItem {
  width: 222rpx;
  height: 222rpx;
  margin: 5rpx 10rpx 5rpx 0;
  border-radius: 12rpx;
  position: relative;
  background: #f5f5f5;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  imgBox {
    width: 100%;
    height: 100%;
  }
  .flex {
    justify-content: center;
  }
  .up {
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 28rpx;
  }
  &:nth-child(3n) {
    margin: 5rpx 0;
  }
}

/* 删除 */
.deleteBox {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 20rpx;
  right: 20rpx;
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  background-color: rgba($color: #000000, $alpha: 0.4);
}
</style>
